<template>
  <div id="client">
    <p style="margin-left: 20px">
      &nbsp; 客户编号：
      <el-input
        v-model="dnum"
        style="width: 240px; margin-left: 10px; margin-right: 20px"
        placeholder="请输入单据编号"
        clearable
      >
      </el-input>
      <el-date-picker
        v-model="effectiveDateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      &nbsp;&nbsp;&nbsp;
      <el-select placeholder="报价类型">
        <el-option
          v-model="dtype"
          v-for="item in baojiatype"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;
      <el-select v-model="dentity" placeholder="报价主体" style="width: 100px">
        <el-option
          v-for="item in baojiabody"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button
        type="primary"
        >查询</el-button
      >
    </p>
    <p style="margin-left: 30px; margin-top: 20px">
      业务员：<el-input
        style="width: 240px; margin-left: 10px; margin-right: 20px"
        placeholder="请输入客户"
        clearable
        v-model="saleser"
      ></el-input>
      <el-button
        style="margin-left: -20px; margin-right: 10px"
        @click="dialogFormVisible = true"
        >...</el-button
      >
      &nbsp;&nbsp;&nbsp;
      <el-select placeholder="报价单状态" v-model="dstatus">
        <el-option
          v-for="item in baojiastatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;
      <el-select placeholder="有效期状态" v-model="vstatus">
        <el-option
          v-for="item in youxiaoqi"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </p>
    <el-divider></el-divider>
    <div style="margin-bottom: 20px; margin-right: 20px; float: right">
      <el-button type="primary" @click="goto('quote')">新增</el-button
      >&nbsp;&nbsp;&nbsp;
      <el-button type="primary">导入</el-button>&nbsp;&nbsp;&nbsp;
      <el-button>导出</el-button>&nbsp;&nbsp;&nbsp;
    </div>
    <div class="client-content">
      <el-table
        height="500px"
        :data="list"
        border
        style="width: 100%; font-size: 13px"
      >
        <el-table-column prop="dId" label="单据编号"> </el-table-column>
        <el-table-column type="selection" width="55px"> </el-table-column>
        <el-table-column prop="ddate" label="单据日期" width="150">
        </el-table-column>
        <el-table-column prop="dnum" label="单据编号" width="120">
        </el-table-column>
        <el-table-column
          prop="dtype"
          label="报价类型"
          width="120"
          :formatter="dtypeFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="dentity"
          label="报价主体"
          width="120"
          :formatter="dentityFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="dstatus"
          label="单据审核状态"
          width="120"
          :formatter="formatDStatus"
        >
        </el-table-column>
        <el-table-column
          prop="vstatus"
          label="有效期状态"
          width="120"
          :formatter="formatVStatus"
        >
        </el-table-column>
        <el-table-column prop="qstartTime" label="有效开始时间" width="120">
        </el-table-column>
        <el-table-column prop="qendTime" label="有效结束时间" width="300">
        </el-table-column>
        <el-table-column
          prop="saleser"
          label="业务员"
          width="120"
          :formatter="saleserFormatter"
        >
        </el-table-column>
        <el-table-column prop="sellorder" label="关联销货订单号" width="120">
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="300">
        </el-table-column>
        <el-table-column prop="preparationTime" label="制单时间" width="300">
        </el-table-column>
        <el-table-column prop="reviewer" label="审核人" width="300">
        </el-table-column>
        -->
        <template>
          <el-switch
            active-color="#66b1ff"
            inactive-color="#c1c1c1"
            active-value="200333"
            inactive-value="0"
          >
          </el-switch>
        </template>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.dstatus === 0"
              type="text"
              size="small"
              @click="verse(scope.row)"
              >审核</el-button
            >
            <el-button
              v-else-if="scope.row.dstatus === 1"
              type="text"
              size="small"
              >反审核</el-button
            >
            <el-button type="text" size="small" @click="handleClick(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next, jumper, ->, total"
      :current-page="currentPage"
      :page-size="this.pageInfo.pageSize"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <div style="height: 20px; clear: both"></div>
  </div>
</template>

<script>
export default {
  name: "qList",
  data() {
    return {
      baojiatype: [
        { value: "customer", label: "客户" },
        { value: "level", label: "客户等级" },
        { value: "type", label: "客户类型" },
      ],
      dialogFormVisible: false,
      list: [],
      customerData: [],
      levelData: [],
      typeData: [],
      salemen: [],
      dentity: "",
      dtype: "",
      saleser: "",
      dstatus: "",
      vstatus: "",
      dnum: "",
      pageInfo: "",
      currentPage: 1,
    };
  },

  methods: {
    handleCurrentChange(newPage) {
      this.getList(newPage, this.pageInfo.pageSize);
    },

    dentityFormatter(row, column, cellValue) {
      const dtype = row.dtype;
      const dentityId = row.dentity;
      switch (dtype) {
        case "customer":
          return (
            this.customerData.find((item) => item.clientId === dentityId)
              ?.clientName || dentityId
          );
        case "level":
          return (
            this.levelData.find((item) => item.clientLevelId === dentityId)
              ?.clientLevelName || dentityId
          );
        case "type":
          return (
            this.typeData.find((item) => item.typeId === dentityId)?.typeName ||
            dentityId
          );
        default:
          return dentityId;
      }
    },
    formatDStatus(row, column, cellValue) {
      const statusMap = {
        0: "未审核",
        1: "审核通过",
        2: "反审核",
      };
      return statusMap[cellValue] || "未知状态";
    },

    formatVStatus(row, column, cellValue) {
      const statusMap = {
        0: "未审核",
        1: "未生效",
        2: "生效",
        3: "失效",
      };
      return statusMap[cellValue];
    },
    dtypeFormatter(row, column, cellValue) {
      const type = this.baojiatype.find((item) => item.value === cellValue);
      return type ? type.label : cellValue;
    },
    // baojiatypeFormatter(value) {
    //   const type = this.baojiatype.find(item => item.value === value);
    //   return type ? type.label : value;
    // },
    saleserFormatter(row, column, cellValue) {
      const saleser = this.salemen.find((s) => s.employeeCode === cellValue);
      return saleser ? saleser.employeeName : cellValue;
    },

    handleClick(row) {
      console.log(row);
      const id = row.dId;
      const dNum = row.dnum;
      this.$router.push({ name: "quote", params: { id: id, dNum: dNum } });
    },
    goto(path) {
      this.$router.push({
        path: path,
      });
    },
    getList(newPage, pageSize) {
      this.axios({
        url: "/sale/quote/list",
        params: {
          pageNum: newPage,
          pageSize: pageSize,
          dentity: this.dentity,
          dtype: this.dtype,
          saleser: this.saleser,
        },
      }).then((rs) => {
        this.list = rs.data.pageInfo.list;
        this.pageInfo = rs.data.pageInfo;
        console.log(rs.data.pageInfo);
      });
    },
    getSaler() {
      this.axios({
        url: "/info/employee/listAll",
      }).then((rs) => {
        this.salemen = rs.data.list;
        console.log("saleMan", rs.data);
      });
    },
    fetchCustomerData() {
      this.axios.get("/info/client/allClient").then((rs) => {
        this.customerData = rs.data.clientList;
      });
    },
    verse(row) {
      const dnum = row.dnum;
      let quotation = this.list.find((item) => item.dnum === dnum);
      this.axios({
        url: "/sale/quote/updateStatus",
        data: {
          ...quotation,
        },
        method: "post",
      }).then((rs) => {
        console.log(rs.data.status);
        if (rs.data.status == true) {
          alert("审核成功");
          this.isVese = false;
          this.isFvers = true;
          this.getList(1, 5);
        } else {
          alert("审核失败");
        }
      });
    },
    fetchLevelData() {
      this.axios.get("/info/clientLevel/list").then((rs) => {
        this.levelData = rs.data.list;
      });
    },
    handleDelete(row) {
      console.log(row);
      var dNum = row.dnum;
      alert(dNum);
      if (confirm("是否删除")) {
        this.axios({
          url: "/sale/quote/delete",
          data: {
            dNum: dNum,
          },
          method: "post",
        }).then((rs) => {
          alert(rs.data.status);
        });
      }
    },
    fetchTypeData() {
      this.axios.get("/info/type/selectAll").then((rs) => {
        this.typeData = rs.data.typeList;
      });
    },
  },
  created() {
    this.getList(1, 5);
    this.getSaler();
    this.fetchCustomerData();
    this.fetchLevelData();
    this.fetchTypeData();
  },
};
</script>

<style scoped>
#client {
  width: 100%;
  height: 100%;
}

.client-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.client-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}
</style>